<template>
  <div class="register">
    <img :src="state" alt="">
    <img :src="logo" alt="" class="logo">
    <form action="" name="login" class="">
      <div class="username">
        <span></span>
        <input type="text" placeholder="请输入账号" id="username" name="username">
      </div>
      <div class="password">
        <span></span>
        <input type="password" placeholder="请输入密码" name="password">
      </div>
      <div class="password">
        <span></span>
        <input type="password" placeholder="请确认密码" name="repassword">
      </div>

      <button type="submit">提交</button>
    </form>
  </div>
</template>

<script>
  export default {
    name: "Register",
    data() {
      return {
        state: require('../assets/imgs/state.png'),
        logo:require('../assets/imgs/login/logo.png')
      }
    }
  }
</script>

<style scoped lang="less">
  .register{
    background-color: rgba(24, 24, 24, 1);
    width: 100%;
    height: 100%;
    img{
      width: 100%;
      text-align: center;
    }
    .logo{
      width: 150px;
      /*margin-left:120px;*/
      margin-top: 100px;
    }
    form{
      margin-top: 75px;
      padding:0 60px;
      button{
        color: #171818;
        background-color: #FEDA05;
        width: 100%;
        height: 33px;
        border-bottom-left-radius: 15px;
        border-top-right-radius: 15px;
        border-bottom-right-radius: 15px;
        border-top-left-radius: 15px;
        border: none;
        outline: none;
        margin-top: 35px;
      }
    }
    .username,.password{
      width: 250px;
      height: 35px;
      border-bottom: 1px solid #ffffff;
      padding-bottom: 8px;
      /*margin-left: 60px;*/
      margin-top: 10px;
      span{
        width: 40px;
        height: 33px;
        background: url("../assets/imgs/login/username.png");
        background-size: cover;
        background-position: 0 0;
        display: block;
        float: left;
        margin-left: -5px;
      }
      input{
        padding-top: 2px;
        font-size: 16px;
        outline: none;
        width: 200px;
        height: 33px;
        color: #FFFFFF;
        border: none;
        background-color: transparent !important;
      }
      input::placeholder{
        color: #FFFFFF;
        letter-spacing: 4px;
        font-family: "微软雅黑 Light";
        font-size: 16px;
      }
    }
    .password{
      span{
        width: 40px;
        height: 33px;
        background: url("../assets/imgs/login/password.png");
        background-size: cover;
        background-position: 0 0;
        display: block;
        float: left;
      }
    }
    .forget{
      padding-top: 10px;
      font-size: 12px;
      span:nth-child(1){
        float: left;
        color: #FFFFFF;
      }
      span:nth-child(2){
        float: right;
        color: #FFFFFF;
      }
    }
  }
</style>
